<!DOCTYPE html>
<html>
  <title>nanoScroller.js</title>
  <meta property="og:title" content="nanoScroller.js - An easy-to-use jQuery scrollbar that looks like Lion's."/>
  <meta property="og:url" content="http://jamesflorentino.com/jquery.nanoscroller/"/>
  <meta property="og:image" content="http://jamesflorentino.com/jquery.nanoscroller/fb.png"/>
  <meta property="og:description" content="nanoScroller.js is a jQuery plugin that offers a simple way of implementing non-distracting scrollbars for your website. It also respects html markup and uses only two layers for scrolling content. It is aimed at providing scrollbar solutions for dynamic content such as from ajax's.
                 "/>
  <link rel="stylesheet" href="css/style.css" />
  <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>
  <script type="text/javascript" src="javascripts/main.js"></script>

  <h1>nanoScroller.js</h1>

  <div id="main">
    <div class="nano">
      <div class="nano-content"><p>Content Here!</p></div>
    </div>
  </div>

  <a href="https://github.com/jamesflorentino/nanoScrollerJS"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>

<!-- stub/filler data -->
<script type="text/template" id="stub">
<h2>What's nanoScroller.js?</h2>
<p>nanoScroller.js is a small jQuery plugin for easily adding Lion-styled scrollbars.</p>
<ul>
  <li>In order to start using it, there are 3 things
</ul>
<h2>1. Mark up</h2>
<pre>
&lt;div id=&quot;about&quot; class=&quot;nano&quot;&gt;
  &lt;div class=&quot;content&quot;&gt; ...content... &lt;/div&gt;
&lt;/div&gt;
</pre>
<ul>
  <li>Use this HTML template. You can change the value of `id` if you want.
</ul>
<h2>2. CSS</h2>
<pre>
@import url('nanoscroller.css');
.nano .nano-content           { padding: 10px; }
.nano .nano-pane              { background: #444; }
.nano .nano-pane .nano-slider { background: #111; }
</pre>
<ul>
  <li><a href="css/nanoscroller.css">nanoscroller.css</a>
</ul>
<h2>3. JavaScript</h2>
<pre>
$("#about.nano").nanoScroller();
</pre>
<ul>
  <li><a href="javascripts/jquery.nanoscroller.min.js">jquery.nanoscroller.min.js</a>
</ul>
<h2>Other methods</h2>
<ul>
  <li>To scroll at the top
</ul>
<pre>
$("#about.nano").nanoScroller({scroll:'top'});
</pre>
<ul>
  <li>To scroll at the bottom
</ul>
<pre>
$("#about.nano").nanoScroller({scroll:'bottom'});
</pre>
<ul>
  <li>Refresh the scrollbar, just call the plugin again.
</ul>
<pre>
$("#about.nano").nanoScroller();
</pre>
<ul>
  <li>To stop the scrollbar
</ul>
<pre>
$("#about.nano").nanoScroller({stop: true});
</pre>

<h2>Features</h2>
<ul class="dots">
  <li>Currently works in IE8+, FireFox, Chrome, Safari
  <li>For IE7 and below, it will fallback to the native scrollbar gadget of the OS.
  <li>Works with popular multi-touch mobile and tablet devices. But still not error free.
  <li>The current version v.02 weighs 3.65KB. I have yet to optimize the code. If you write CoffeeScript, feel free to Fork the project.
</ul>
<footer>
<h2>Credits</h2>
<ul>
<li>Written by: <a href="http://jamesflorentino.com">James Florentino</a> in <a href="http://coffeescript.org" target="_blank">CoffeeScript</a>
<li>License: <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank"> MIT License</a>
<li>Last updated: Dec 8, 2011
</ul>
</footer>

</script>

